<template>
    <div id="home">
        
        <!-- <Button title="我是按钮" /> -->
        <!-- <Header title="Header" /> -->
        <!-- <Footer title="Footer" /> -->


        <!-- 商品卡片 列表 -->
        <van-card
            v-for="(item,index) in list"
            :key="index"
            :price="item.price | filprice"
            :desc="item.desc"
            :title="item.title"
            :thumb="item.img"
        >
            <template #num>
                <div>
                    <van-icon 
                        name="shopping-cart-o" 
                        size="24" 
                        color="red" 
                        @click="add(item)"
                        />
                </div>
            </template>
        </van-card>

    </div>
</template>

<script>
// import Button from '@/components/Button.vue'
// import Header from '@/components/Header.vue'
// import Footer from '@/components/Footer.vue'
export default {
    // components:{
    //     Button,
    //     Header,
    //     Footer
    // },
    data() {
        return {
           list:[],
        }
    },
    mounted() {
        this.$axios.get("data.json").then((res) => {
            console.log(res.data.list);
            this.list = res.data.list;
        });
    },
    methods: {
        // 点击 购物车图标添加
        add(item){
            this.$store.commit("add",item);
        }
    },
    // 过滤器
    filters:{
        // 过滤时间
        filprice(num){
            return num.toFixed(2);
        }
    }
}
</script>

<style lang="scss">
#home{
    width:100%;
    height:150vh;
    // background-color: pink;
}
</style>